<template>
  <ul class="news-list">
    <li>编号:{{ params.id }}</li>
    <li>标题:{{ params.title }}</li>
    <li>内容:{{ params.content }}</li>
    <li>编号:{{ id }}</li>
    <li>标题:{{ title }}</li>
    <li>内容:{{ content }}</li>
  </ul>
</template>
<script setup lang="ts" name="Detail">
import { defineProps, withDefaults,toRefs } from "vue";
import { useRoute } from "vue-router"
// hooks使用
let route = useRoute()
console.log(route)
// 从路由对象中获取数据
let {params}  = toRefs(route)

// 路由通过props进行类似组件传递
const props =withDefaults(
  defineProps<{ id: number; title: string; content: string}>(),
  { id: 1,title: "", content: "" }
);

// const props =withDefaults(
//   defineProps<{ data: { id: number; title: string; content: string } }>(),
//   { data: ()=>({ id: 1, title: "", content: "" }) }
// );

</script>
<style scoped>
.news-list {
  list-style: none;
  padding-left: 20px;
}
.news-list > li {
  line-height: 30px;
}
</style>
